<template>
  <div class="shopcarContainer">
        <div class="goodslist">
            	<div class="mui-card">
				         <div class="mui-card-content">
					         <div class="mui-card-content-inner">
						            <mt-switch></mt-switch>
                        <img src="../../images/小米.jpg" alt="">
                        <div class="info">
                            <h1>小米(mi)小米note 16G双网通版本</h1>
                            <p>
                               <span class="price">$3200</span>
                               <numbox></numbox> 
                               <a href="" @click.prevent="removeGoodslist">删除</a>
                            </p>
                        </div>
				        	 </div>
				        </div>
			       </div>
        </div>


        <div class="mui-card">
				    <div class="mui-card-content">
					     <div class="mui-card-content-inner">
						      <div class="left">
                       <p>总计(不含运费)</p>
                       <p>已勾选商品件数<span class="red">{{$store.getters.getGoodsCountAndAmount.count}}</span>件,总价<span class="red">${{$store.getters.getGoodsCountAndAmount.amount}}</span></p>
                  </div>
                  <div class="right">
                       <mt-button type="danger" size="small">去结算</mt-button>
                  </div>
					     </div>
			    	</div>
			  </div>


  </div>
</template>

<script>
 //导入shopcar_numbox组件
 import numbox from '../subcomponents/shopcar_numbox.vue'
 export default{
   //分析:根据car中的id,来获取car中选中手机的信息,通过接口获取数据
   //如何把Car中的数据根据id传递给购物车组件:1.创建一个空对象o 2.通过forEach把CAR的id作为o的属性,CAR的count作为值,遍历给o 3.这些操作都是挂载在getters上 4.然后其他组件通过$store.getters.getGoodsCount.[item.id]获取自己当前的count
   
   components:{
      numbox
   },
   methods:{
      removeGoodslist(){
         console.log('陆洲喜欢我')
      }
   }
 }

</script>

<style lang="scss" scoped>
   .shopcarContainer{
      background-color: #eee;
      overflow: hidden;
      .goodslist{
        .mui-card-content-inner{
           display: flex;
           align-items: center;//侧轴居中
        }
         img{
           width: 50px;
           height: 50px;
         }
         h1{
           font-size: 13px;
         }
         .info{
            .price{
               color: red;
               font-weight: bold;
            }
         }
      }

      .mui-card-content-inner{
            display:flex;
            justify-content: space-between;
            align-items: center;
            .red{
              color:red;
              font-weight: bold;
              font-size:16px;
            }
      }
   }
</style>
